<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script src="./jquery.min.js"></script>
<script>

    $(function () {
        init()
    })

    var num = 0

    function init() {
        f1()
            .then(f2)
            .then(f3)
            .then(f4)
            .catch(err => {
                console.error(`error :${err}`);
            })
    }

    function f1() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(`fn1：${num}`);
                num = 11
                resolve()
            }, 3000);
        })
    }

    function f2() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(`fn2：${num}`);
                num = 22
                resolve()
            }, 2000);
        })
    }

    function f3() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(`fn3：${num}`);
                num = 33
                resolve()
            }, 1000);
        })
    }

    function f4() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.error(`fn4：${num}`);
                num = 44
                reject(num)
            }, 500);
        })
    }



</script>

</html>